<template>
  <zm-body>
    <!-- left -->
    <div class="app-lefter-bg" style="width:36rem"></div>
    <div class="dynamicInfo-lefter">
      <zm-box3>
        <div class="dynamicInfo-asider" v-loading="pageDataLoading">
          <div class="filter-bar">
            <div class="filter-bar-left">
              <div class="filter-box-common f13">
                <div class="filter-box-common-header" @click="showFilterBody = !showFilterBody">
                  <span
                    class="ml15"
                    v-if="filterForm.startDate || filterForm.endDate"
                  >{{filterForm.startDate}} ~ {{filterForm.endDate}}</span>
                  <template v-else>选择时间</template>
                  <i class="iconfont icon-down-arrow-line f12 ml10"></i>
                </div>
                <div class="filter-box-common-body" v-show="showFilterBody">
                  <el-form ref="filterForm" size="mini" :model="filterForm" label-width="60px">
                    <el-form-item label="时间">
                      <el-col :span="12">
                        <el-date-picker
                          type="date"
                          placeholder="开始日期"
                          value-format="yyyy-MM-dd"
                          format="yyyy-MM-dd"
                          v-model="filterForm.startDate"
                          style="width: 100%;"
                        ></el-date-picker>
                      </el-col>
                      <el-col :span="12">
                        <el-date-picker
                          type="date"
                          placeholder="结束日期"
                          value-format="yyyy-MM-dd"
                          format="yyyy-MM-dd"
                          v-model="filterForm.endDate"
                          style="width: 100%;"
                        ></el-date-picker>
                      </el-col>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="filterHandler">查询</el-button>
                      <el-button @click="showFilterBody = false">取消</el-button>
                    </el-form-item>
                  </el-form>
                  <div
                    class="filter-box-common-closer"
                    v-if="false"
                    @click="showFilterBody = false"
                  >
                    <i class="iconfont icon-close-line"></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="filter-bar-right f12"></div>
          </div>
          <ul class="panel-num-list">
            <li
              :class="{active:activeStatus.id===item.id}"
              v-for="(item,index) in statusList"
              :key="item.id"
              @click="statusItemClickHandler(item,index)"
            >
              <div class="num">{{item.value}}</div>
              <div class="label">{{item.label}}</div>
              <div class="num-arrow">
                <i class="iconfont icon-buzhoujiantou"></i>
              </div>
            </li>
          </ul>
          <!-- 柱状图 -->
          <div class="bar-chart-box mb20" style="height:150px" ref="asiderBarChart"></div>
          <!-- 列表 -->
          <el-table size="small" fit :data="tableData" style="width: 100%">
            <el-table-column prop="cName" label="问题来源"></el-table-column>
            <el-table-column prop="report" label="上报" width="52">
              <template slot-scope="{row}">
                <a href="javascript:;" @click="caseNumClickHandler(row,1,'上报')">{{row.report}}</a>
              </template>
            </el-table-column>
            <el-table-column prop="putOnRecord" label="立案" width="52">
              <template slot-scope="{row}">
                <a
                  href="javascript:;"
                  v-if="row.putOnRecord"
                  @click="caseNumClickHandler(row,2,'立案')"
                >{{row.putOnRecord}}</a>
                <span v-else>{{row.putOnRecord}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="send" label="作废" width="52">
              <template slot-scope="{row}">
                <a
                  href="javascript:;"
                  v-if="row.send"
                  @click="caseNumClickHandler(row,3,'作废')"
                >{{row.send}}</a>
                <span v-else>{{row.send}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="disposal" label="处置" width="52">
              <template slot-scope="{row}">
                <a
                  href="javascript:;"
                  v-if="row.disposal"
                  @click="caseNumClickHandler(row,4,'处置')"
                >{{row.disposal}}</a>
                <span v-else>{{row.disposal}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="verification" label="待办结" width="52">
              <template slot-scope="{row}">
                <a
                  href="javascript:;"
                  v-if="row.verification"
                  @click="caseNumClickHandler(row,5,'待办结')"
                >{{row.verification}}</a>
                <span v-else>{{row.verification}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="end" label="结案" width="52">
              <template slot-scope="{row}">
                <a
                  href="javascript:;"
                  v-if="row.end"
                  @click="caseNumClickHandler(row,6,'结案')"
                >{{row.end}}</a>
                <span v-else>{{row.end}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </zm-box3>
    </div>
    <!-- end left -->
    <div
      id="mapBox"
      :class="{ready:mapReady}"
      class="main-body-mapbox"
      style="height:100vh;width:100vw"
    ></div>
    <case-base-info
      v-model="showCaseInfoDialog"
      :case-code="activeCaseObj.code"
      :case-id="activeCaseObj.id"
    ></case-base-info>
    <case-list
      v-model="showCaseListDialog"
      :case-filter="activeCaseFilter"
      @list-ready="caseListReadyHandler"
      @case-click="caseClickHandler"
      @juhe="juhe"
    ></case-list>
    <aj-info
            v-model="showInfo"
            :case-code="showAnjianInfo.code"
            :case-id="showAnjianInfo.id"
            :recid="showAnjianInfo.id"
    >
    </aj-info>
  </zm-body>
</template>

<script>
/*
   功能模块  案件分析-类型动态
   创建人    zgf
   更新时间  2020/04/14
   备注
*/
let sb=0,la=0,zf=0,cz=0,hc=0,ja=0;
let wtlyTitle=[],sbArr=[],laArr=[],zfArr=[],czArr=[],hcArr=[],jaArr=[];
let juheArr = []
import elDragDialog from "@/directive/el-drag-dialog"; // base on element-ui
import CaseBaseInfo from "../public/caseBaseInfo";
import CaseList from "../public/caseList";
import AjInfo from '../public/ajInfo';
export default {
  name: "AnalysisSourceDynamicInfo",
  directives: { elDragDialog },
  components: { CaseBaseInfo, CaseList, AjInfo },
  data() {
    return {
      pagename: "SourceDynamicInfo",
      filterForm: {
        endDate: this.$util.formatDate(new Date(), "yyyy-MM-dd"),
        startDate: this.$util.formatDate(
                new Date(new Date().getTime() - (new Date().getDate()-1) * 24 * 60 * 60 * 1000),
                "yyyy-MM-dd"
        )
      },
      showCaseListDialog: false,
      showFilterBody: false,
      statusList: [],
      activeStatus: null,
      pageDataLoading: false,
      mapReady: false,
      map: null,
      markersList: [],
      asiderBarChart: null,
      tableData: [],
      activeCaseFilter: {},
      showCaseInfoDialog: false,
      activeCaseObj: {},
      showInfo: false,
      showAnjianInfo:{}
    };
  },
  watch: {
    showCaseListDialog(newValue){
      if(!newValue){
        // let firsttime = new Date().getFullYear()+ "-" + ((new Date().getMonth()+1)<10?"0"+(new Date().getMonth()+1):(new Date().getMonth()+1)) + "-01 00:00:00"
        // let lasttime = new Date().getFullYear()+ "-" + ((new Date().getMonth()+1)<10?"0"+(new Date().getMonth()+1):(new Date().getMonth()+1)) + "-" + (new Date().getDate()<10?"0"+new Date().getDate():new Date().getDate()) + " 00:00:00"
        // this.getData(firsttime, lasttime)
      }
    }
  },
  created(){
    this.pageDataLoading = true;
    let firsttime = new Date().getFullYear()+ "-" + ((new Date().getMonth()+1)<10?"0"+(new Date().getMonth()+1):(new Date().getMonth()+1)) + "-01 00:00:00"
    var day3 = new Date();
    day3.setTime(day3.getTime()+24*60*60*1000);
    let lasttime = day3.getFullYear()+ "-" + ((day3.getMonth()+1)<10?"0"+(day3.getMonth()+1):(day3.getMonth()+1)) + "-" + (day3.getDate()<10?"0"+(day3.getDate()):(day3.getDate())) + " 00:00:00"
    let curSelectedStatus = this.activeStatus;
    this.getData(firsttime, lasttime)

  },
  mounted() {
    window.vmComponent = this;
    this.$nextTick(() => {
      this.mapInit();
    });
    this.getPagedata();
    this.getAsiderTableData();
  },
  methods: {
    statusItemClickHandler(item, index) {
      // this.activeStatus.label = item.label
      switch (item.label) {
        case '上报':
          this.asiderBarChartInit(sbArr,wtlyTitle);
          break;
        case '立案':
          this.asiderBarChartInit(laArr,wtlyTitle);
          break;
        case '作废':
          this.asiderBarChartInit(zfArr,wtlyTitle);
          break;
        case '处置':
          this.asiderBarChartInit(czArr,wtlyTitle);
          break;
        case '待办结':
          this.asiderBarChartInit(hcArr,wtlyTitle);
          break;
        case '结案':
          this.asiderBarChartInit(jaArr,wtlyTitle);
          break;
        default:
          break;
      }
      console.log(item, index);
      this.activeStatus = item;
    },
    filterHandler() {
      this.pageDataLoading = true;
      let startDate = this.filterForm.startDate
      let endDate = this.filterForm.endDate
      if(startDate > endDate){
        this.$alert('开始时间需小于结束时间', '监督系统', {
          confirmButtonText: '确定'
        });
        return false
      }
      let firsttime, lasttime
      if(startDate){
        firsttime = startDate
        if(endDate){
          lasttime = endDate
        }else{
          this.$alert('请选择结束时间', '监督系统', {
            confirmButtonText: '确定'
          });
          return false
        }
      }
      if(endDate){
        lasttime = endDate
        if(startDate){
          firsttime = startDate
        }else{
          this.$alert('请选择开始时间', '监督系统', {
            confirmButtonText: '确定'
          });
          return false
        }
      }
      this.searchAjArr(firsttime, lasttime)
      this.showFilterBody = false;
      // this.getBarChartData();
     // this.getAsiderTableData();
    },
    mapInit() {
      const self = this;
      const AMap = window.AMap;
      setTimeout(() => {
        this.mapReady = true;
      }, 1000);
      self.map = new AMap.Map("mapBox", {
        mapStyle: "amap://styles/a5f6e6bd157193151290059146ec5e9b", // 设置地图的显示样式
        viewMode: "3D",
        turboMode: true,
        defaultCursor: "pointer",
        showBuildingBlock: true,
        expandZoomRange: true,
        zooms: [3, 20],
        zoom: 15,
        pitch: 40,
        center: [116.604808,40.127945],
        forceVector: true

      });
      let uUrl = this.baseUrl.WgUrl;
      var wms = new AMap.TileLayer.WMS({
        url: uUrl, // wms服务的url地址
        blend: false, // 地图级别切换时，不同级别的图片是否进行混合
        tileSize: 512, // 加载WMS图层服务时，图片的分片大小
        params: {
          styles:'default',
          'LAYERS': '0',
          VERSION:'1.3.0'
        } // OGC标准的WMS地图服务的GetMap接口的参数
      });
      wms.setMap(self.map);
    },
    //列表中案件数字点击
    caseNumClickHandler(row, col, colName) {
      debugger
      this.map.clearMap();
      let firsttime = this.filterForm.startDate
      let lasttime = this.filterForm.endDate
      this.showCaseListDialog = true;
      this.activeCaseFilter = {
        stage: col, //阶段id（1上报、2立案、3作废、4处置、5待办结、6结案）
        stageLabel: colName, //阶段label（上报、立案、作废、处置、待办结、结案）
        //areaId: row.id, //某某村的id
        areaName: row.cName, //某某村名称
        firsttime: firsttime,
        lasttime: lasttime,
        pagename: this.pagename
      };
    },
    //批量添加点
    addPointsListToMap() {
      console.log(this.caseList);
      this.removeMapMarkers();
      for (var i in this.caseList) {
        let item = this.caseList[i];
        this.addCaseMarkerToMap(item, i);
      }
    },
    //在地图上添加案件标注点
    addCaseMarkerToMap(obj, index) {
      const self = this;
      const AMap = window.AMap;
      const objStr = encodeURIComponent(JSON.stringify(obj));
      // 点标记显示内容，HTML要素字符串
      var markerContent = `<div class="map-icon-marker-mini" onclick="vmComponent.mapCasePointClick('${objStr}')">
          <div class="map-icon-marker-mini__icon"><span class="marker-index">${+index +
            1}</span></div>
      </div>`;
      var position = new AMap.LngLat(obj.position[0], obj.position[1]);
      var marker = new AMap.Marker({
        position: position,
        // 将 html 传给 content
        content: markerContent,
        // 以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(3, -66)
      });
      this.markersList.push(marker);
      // 将 markers 添加到地图
      self.map.add(marker);
    },
    //在地图上添加村落案件集合标注点
    addMarkerGroupToMap(obj) {
      const self = this;
      const AMap = window.AMap;
      // 点标记显示内容，HTML要素字符串
      var markerContent = `<div class="map-icon-marker" style="width:${obj.cName
        .length + 5}em">
          <div class="map-icon-marker__icon"><i class="iconfont icon-star"></i></div>
          <div class="map-icon-marker__label">
            ${obj.cName} ${obj.total} 个
          </div>
      </div>`;
      var position = new AMap.LngLat(obj.position[0], obj.position[1]);
      var marker = new AMap.Marker({
        position: position,
        // 将 html 传给 content
        content: markerContent,
        // 以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(2, -70)
      });
      this.markersList.push(marker);
      // 将 markers 添加到地图
      self.map.add(marker);
    },
    removeMapMarkers() {
      this.map.remove(this.markersList);
    },
    //地图上的事件点点击
    mapCasePointClick(objStr) {
      let item = JSON.parse(decodeURIComponent(objStr));
      this.activeCaseObj = item;
      this.showCaseInfoDialog = true;
      this.map.panTo(item.position);
    },
    //获取村镇列表
    getBarChartData() {
      console.log(this.filterForm);
      console.log(this.activeStatus);
      // setTimeout(() => {
      //   this.asiderBarChartInit(
      //     [130, 90, 55],
      //     ["自行处置上报", "信息采集员上报", "社会公众举报"]
      //   );
      // }, 200);
    },
    //获取左侧列表数据
    getAsiderTableData() {
      setTimeout(() => {

        this.mapPointList = [
          {
            id: 1,
            cName: "某某村1",
            report: 140,
            putOnRecord: 0,
            send: 128,
            disposal: 128,
            verification: 0,
            end: 128,
            total:569,
            position: [108.529042, 40.272524],
          },
          {
            id: 2,
            cName: "某某村2",
            report: 0,
            putOnRecord: 128,
            send: 128,
            disposal: 128,
            verification: 128,
            end: 128,
            position: [122.547597, 41.369921],
            total:685
          },
          {
            id: 3,
            cName: "某某村3",
            report: 140,
            putOnRecord: 0,
            send: 128,
            disposal: 128,
            verification: 128,
            end: 0,
            position: [116.922597, 38.127337],
            total:469
          },
          {
            id: 4,
            cName: "某某村4",
            report: 0,
            putOnRecord: 128,
            send: 128,
            disposal: 128,
            verification: 128,
            end: 128,
            position: [127.95287, 35.703385],
            total:769
          },
          {
            id: 5,
            cName: "某某村5",
            report: 140,
            putOnRecord: 0,
            send: 128,
            disposal: 128,
            verification: 128,
            end: 0,
            position: [115.867909, 33.093057],
            total:564
          },
          {
            id: 6,
            cName: "某某村6",
            report: 140,
            putOnRecord: 0,
            send: 128,
            disposal: 128,
            verification: 128,
            end: 0,
            position: [109.100331, 34.697948],
            total:698
          },
          {
            id: 7,
            cName: "某某村7",
            report: 0,
            putOnRecord: 128,
            send: 128,
            disposal: 128,
            verification: 128,
            end: 128,
            position: [117.230214, 43.126363],
            total:359
          },
          {
            id: 8,
            cName: "某某村8",
            report: 140,
            putOnRecord: 0,
            send: 128,
            disposal: 128,
            verification: 128,
            end: 0,
            position: [111.649159, 38.058166],
            total:469
          }
        ];
        this.removeMapMarkers();
        for (var i in this.mapPointList) {
          let item = this.mapPointList[i];
          this.addMarkerGroupToMap(item);
        }
      }, 1000);
    },
    //获取页面里一些杂碎数据
    getPagedata() {
      // this.pageDataLoading = true;
      let curSelectedStatus = this.activeStatus;
      console.log(curSelectedStatus);
      setTimeout(() => {
        // this.pageDataLoading = false;
        this.statusList = [
          { id: 1, label: "上报", value: 0 },
          { id: 2, label: "立案", value: 0 },
          { id: 3, label: "作废", value: 0 },
          { id: 4, label: "处置", value: 0 },
          { id: 5, label: "待办结", value: 0 },
          { id: 6, label: "结案", value: 0 }
        ];
        if (!this.activeStatus && this.statusList.length) {
          this.activeStatus = this.statusList[0];
        }
        this.getBarChartData();
      }, 0);
    },
    //左侧柱状图
    asiderBarChartInit(dataArr, xLabels) {
      this.asiderBarChart = this.$echarts.init(this.$refs.asiderBarChart);
      this.asiderBarChart.setOption({
        legend: {
          show: false
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            return  params[0].axisValue +"："+params[0].value;
            // 鼠标移上显示的文字
            //1.span是小蓝点
            //2.后边是显示的文字，一定要加[0](如果想知道为啥log一下看看数据console.log(params))
          }
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "10%",
          top: "20%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            fontSize: 12,
            textStyle: {
              color: "#01AAFF"
            }
          },
          data: xLabels
        },
        yAxis: {
          axisLine: {
            show: false,
            onZero: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: ["#381F8C"]
            }
          },
          minInterval: 1,
          axisLabel: {
            show: true,
            fontSize: 10,
            textStyle: {
              color: "#01AAFF"
            }
          }
        },
        series: [
          {
            type: "bar",
            barWidth: "16px",
            name: this.activeStatus.label,
            itemStyle: {
              normal: {
                color: "#076DFF"
              }
            },
            data: dataArr
          }
        ]
      });
    },
    //案件列表加载完毕
    caseListReadyHandler(list) {
      debugger
      this.caseList = list;
      this.addPointsListToMap();
    },
    //案件列表里的案件item点击
    caseClickHandler(item, index) {
      this.removeMapMarkers();
      this.addCaseMarkerToMap(item, index);
      this.activeCaseObj = item;
      this.showCaseInfoDialog = true;
      this.map.panTo(item.position);
    },
    //聚合
    juhe(arr){
      var sts = [{
        url: "images/huan1.png  ",
        size: new AMap.Size(60, 60),
        offset: new AMap.Pixel(-30, -30),
        textColor: "#fff",
      }, {
        url: "images/red-huan1.png",
        size: new AMap.Size(60, 60),
        offset: new AMap.Pixel(-30, -30),
        textColor: "#fff",
      },{
        url: "images/yellow-huan1.png",
        size: new AMap.Size(60, 60),
        offset: new AMap.Pixel(-30, -30),
        textColor: "#fff",
      }];
      var cluster = new AMap.MarkerClusterer(this.map, arr, {
        styles: sts,
        gridSize: 80
      });
    },
    //条件查询
    searchAjArr(firsttime, lasttime){
      this.map.clearMap();
      this.getData(firsttime, lasttime)
    },
    //获取页面数据
    getData(firsttime, lasttime){
      sb=0;la=0;zf=0;cz=0;hc=0;ja=0;
      wtlyTitle=[];sbArr=[];laArr=[];zfArr=[];czArr=[];hcArr=[];jaArr=[];
      juheArr = []
      this.tableData = []
      this.$http.get(this.baseUrl.ajfxlydt, {
        params:{
          firsttime: firsttime,
          lasttime: lasttime
        }
      }).then((rel)=>{
        let allDataArr = rel.data.tj
        for(let i=0;i< allDataArr.length;i++){
          sb += allDataArr[i].ZS
          la += allDataArr[i].LAS
          zf += allDataArr[i].ZFS
          cz += allDataArr[i].CZZ
          hc += allDataArr[i].HCS
          ja += allDataArr[i].JAS
          wtlyTitle.push(allDataArr[i].WTLY)
          sbArr.push(allDataArr[i].ZS)
          laArr.push(allDataArr[i].LAS)
          zfArr.push(allDataArr[i].ZFS)
          czArr.push(allDataArr[i].CZZ)
          hcArr.push(allDataArr[i].HCS)
          jaArr.push(allDataArr[i].JAS)
          //左侧表格数据
          this.tableData.push({
            id: i,
            cName: allDataArr[i].WTLY,
            report: allDataArr[i].ZS,
            putOnRecord: allDataArr[i].LAS,
            send: allDataArr[i].ZFS,
            disposal: allDataArr[i].CZZ,
            verification: allDataArr[i].HCS,
            end: allDataArr[i].JAS
          })
        }
        //时间选择框下面的数据
        this.statusList = [
          { id: 1, label: "上报", value: sb },
          { id: 2, label: "立案", value: la },
          { id: 3, label: "作废", value: zf },
          { id: 4, label: "处置", value: cz },
          { id: 5, label: "待办结", value: hc },
          { id: 6, label: "结案", value: ja }
        ];
        //左侧柱图
        this.asiderBarChartInit(sbArr, wtlyTitle);
        for (let j=0;j<rel.data.ajxx;j++) {
          let item = rel.data.ajxx[j];
          juheArr.push(
                  new AMap.Marker({
                    position: [item.position[0], item.position[1]],
                    content: '<div style="background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
                    offset: new AMap.Pixel(-15, -15)
                  })
          )
          //this.addMarkerGroupToMap(item);
        }
        this.juhe(juheArr)
        this.pageDataLoading = false;
      }).catch((e)=>{
        console.log(e)
        this.pageDataLoading = false;
      })
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../css/mixin.less";
.fadeInUpA();
.fadeInDownA();

.dynamicInfo-lefter {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 5;
  width: 32rem;
  max-width: 500px;
  .zm-box3 {
    height: calc(100vh - 6rem);
  }
  .dynamicInfo-asider {
    height: calc(100vh - 11rem);
    overflow-y: auto;
    padding: 5px;
    .nativeScroll();
  }
  .bar-chart-box {
    border: solid 1px rgba(255, 255, 255, 0.2);
    margin: 10px 6px;
    background-color: rgba(0, 0, 0, 0.07);
  }
}

.panel-aside-nav {
  position: absolute;
  left: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  top: 3rem;
  margin-left: -0.3rem;
  li {
    width: 3.5rem;
    height: 3rem;
    margin-top: 0.6rem;
    background-color: #0e0e5a;
    font-size: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px #0281ff;
    border-left: none;
    transition: all 0.3s;
    cursor: pointer;
    flex-direction: column;
    .num {
      font-size: 0.75rem;
    }
    .label {
      font-size: 0.6rem;
    }
    &.active {
      background-color: #0281ff;
      border-color: #0281ff;
      color: #0b0a2c;
      font-weight: bold;
    }
    &:hover {
      opacity: 0.7;
    }
  }
}
.panel-num-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  li {
    width: 3.5rem;
    height: 3rem;
    background-color: #0e0e5a;
    font-size: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px #0281ff;
    transition: all 0.3s;
    flex: 1;
    margin: 0.5rem;
    cursor: pointer;
    position: relative;
    flex-direction: column;
    .num {
      font-size: 0.75rem;
    }
    .label {
      font-size: 0.6rem;
    }
    &.active {
      background-color: #0281ff;
      border-color: #0281ff;
      color: #0b0a2c;
      font-weight: bold;
    }
    &:hover {
      opacity: 0.7;
    }
    &:last-child {
      .num-arrow {
        display: none;
      }
    }
    .num-arrow {
      position: absolute;
      left: 100%;
      z-index: 3;
      i {
        color: #0281ff;
        font-size: 14px;
      }
    }
  }
}
.filter-bar {
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem;
  height: 2.5rem;
  align-items: center;
  &-left {
    flex: 1;
  }
}
.caselist-swiper {
  height: calc(100vh - 16rem);
}

.a-case-list {
  margin: 0;
  padding: 0;
  list-style: none;
  padding-top: 0.5rem;
  min-height: 100px;
  height: calc(100vh - 16rem);
  overflow-y: auto;
  margin-bottom: 50px;
  .nativeScroll();
  .a-case-item {
    display: flex;
    padding: 0.5rem;
    line-height: 1.4em;
    align-items: center;
    border-bottom: dotted 1px #3d3db6;
    box-sizing: border-box;
    cursor: pointer;
    &:hover {
      background-color: #130a6b;
    }
    &__img {
      width: 5rem;
      height: 4rem;
      margin-right: 0.75rem;
      img {
        width: 100%;
        height: 4rem;
        object-fit: cover;
        border-radius: 0.2rem;
      }
    }
    &__main {
      flex: 1;
      margin-right: 0.75rem;
    }
    &__code {
      font-size: 0.6rem;
      color: #b2bcff;
    }
    &__title {
      font-size: 0.8rem;
      counter-reset: #b2bcff;
      font-weight: bold;
    }
    &__type {
      font-size: 0.65rem;
      color: #f7b500;
    }
    &__createDate {
      font-size: 0.6rem;
      color: #b2bcff;
      opacity: 0.5;
    }
    &__sort-num {
      width: 1.5rem;
      height: 1.5rem;
      background-color: #f3b200;
      color: midnightblue;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5rem;
      font-weight: bold;
    }
  }
}
.a-case-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
}
</style>
